<template>
  <div>
    <div id="search">
      <div id="search">
        <el-button
          size=""
          type="text"
          icon="el-icon-search"
          style="color: blueviolet"
          @click="search"
        ></el-button>
      </div>
      <div id="searchdata" v-show="show">
        <el-select
          v-model="searchData.class_first"
          placeholder="一级类别"
          style="width: 102px"
        >
          <el-option value=""></el-option>
          <el-option label="粮油" value="粮油"></el-option>
          <el-option label="食品" value="食品"></el-option>
          <el-option label="日用品" value="日用品"></el-option>
          <el-option label="电器" value="电器"></el-option>
        </el-select>
        <el-select
          v-model="searchData.class_second"
          placeholder="二级类别"
          style="width: 102px"
        >
          <el-option value=""></el-option>
          <el-option label="水果" value="水果"></el-option>
          <el-option label="电脑" value="电脑"></el-option>
          <el-option label="零食" value="零食"></el-option>
          <el-option label="食用油" value="食用油"></el-option>
        </el-select>
        <el-input
          v-model="searchData.goods_name"
          placeholder="请输入商品名称"
        ></el-input>
        <el-input
          v-model="searchData.barcode"
          placeholder="请输入商品条码"
        ></el-input>
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column prop="serial_Number" label="流水号"></el-table-column>
      <el-table-column prop="barcode" label="条码"> </el-table-column>
      <el-table-column prop="goods_Name" label="商品名称"> </el-table-column>
      <el-table-column prop="unit" label="单位" width="110px">
      </el-table-column>
      <el-table-column prop="persent_Price" label="当前售价" width="90px">
      </el-table-column>
      <el-table-column prop="quantity_In_Stock" label="进货数量" width="100px">
      </el-table-column>
      <el-table-column prop="class_First" label="一级类别"> </el-table-column>
      <el-table-column prop="class_Second" label="二级类别"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            v-show="scope.row.goods_State == 1"
            type="text"
            style="color: blueviolet"
            @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button type="text" @click="lock(scope.$index, scope.row)">
            {{ scope.row.goods_State == "1" ? "锁定" : "解锁" }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="pageSizeChange"
      @current-change="pageChange"
      :current-page="page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-dialog title="修改商品基本信息" :visible.sync="dialogFormVisible">
      <el-form :model="updateData">
        <el-form-item label="流水号" :label-width="formLabelWidth">
          <el-input
            v-model="updateData.serial_Number"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="条码" :label-width="formLabelWidth">
          <el-input
            v-model="updateData.barcode"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input
            v-model="updateData.goods_Name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="单位" :label-width="formLabelWidth">
          <el-input v-model="updateData.unit" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="当前售价" :label-width="formLabelWidth">
          <el-input
            v-model="updateData.persent_Price"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="进货数量" :label-width="formLabelWidth">
          <el-input
            v-model="updateData.quantity_In_Stock"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="一级类别" :label-width="formLabelWidth">
          <el-input
            v-model="updateData.class_First"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="二级类别" :label-width="formLabelWidth">
          <el-input
            v-model="updateData.class_Second"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            v-model="updateData.desc"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update" style="background: blueviolet"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "Chakanshangpin",
  data() {
    return {
      loading: false,
      show: false,
      data: [],
      updateData: {
        id: "",
        goods_Name: "",
        unit: "",
        persent_Price: "",
        desc: "",
      },
      searchData: {
        class_first: "",
        class_second: "",
        goods_name: "",
        barcode: "",
      },
      total: 0,
      pageSize: 5,
      page: 1,
      dialogFormVisible: false,
      formLabelWidth: "180px",
    };
  },
  mounted() {
    this.getPro();
  },
  methods: {
    getPro() {
      this.$axios({
        url: "/findpro",
        method: "get",
      }).then((res) => {
        console.log(res);
        this.data = res.data.data;
        this.total = res.data.data.length;
        this.loading = false;
      });
    },
    search() {
      if (
        !(
          this.searchData.class_first ||
          this.searchData.class_second ||
          this.searchData.goods_name ||
          this.searchData.barcode
        )
      ) {
        this.show = !this.show;
      }
      if (
        this.searchData.class_first ||
        this.searchData.class_second ||
        this.searchData.goods_name ||
        this.searchData.barcode
      ) {
        this.loading = true;
        this.$axios({
          url: "/selectpro",
          method: "post",
          data: this.searchData,
        }).then((res) => {
          console.log(res);
          //this.getPro();
          this.data = res.data.data;
          this.total = res.data.data.length;
          this.loading = false;
        });
      }
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible = true;
      this.updateData = Object.assign({}, row);
    },
    update() {
      this.loading = true;
      this.dialogFormVisible = false;
      this.$axios({
        url: "/updatepro",
        method: "post",
        data: {
          goods_name: this.updateData.goods_Name,
          desc: this.updateData.desc,
          persent_price: this.updateData.persent_Price,
          unit: this.updateData.unit,
          id: this.updateData.id,
        },
      }).then((res) => {
        console.log(res);
        this.getPro();
        if (res.data.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
        }
      });
    },
    lock(index, row) {
      row.goods_State == 1 ? row.goods_State = 0 : row.goods_State = 1;
      this.$axios({
        url: "/prolock",
        method: "post",
        data: {
          goods_State: row.goods_State,
          id: row.id,
        },
      }).then((res) => {
        console.log(res);
        this.getPro();
      });
    },
    pageChange(e) {
      console.log(e);
      this.page = e;
    },
    pageSizeChange(e) {
      console.log(e);
      this.pageSize = e;
    },
  },
  computed: {
    tableData: function () {
      return this.data.slice(
        (this.page - 1) * this.pageSize,
        this.page * this.pageSize
      );
    },
  },
};
</script>
<style scoped>
#search {
  float: right;
}
#search .el-input {
  width: 130px;
}
#searchdata {
  display: inline;
}
.el-table {
  border-radius: 20px;
}
.el-pagination {
  margin-top: 30px;
}
</style>